<template>
	<view>
		<!-- loading -->
		<view class="mask" v-if="loading">
			<view class="preloader">
				<view class="loader"></view>
			</view>
		</view>

		<!-- orderStatus 订单状态(0:待接单, 1:待签到, 2: 待结束, 3:待付款, 4:已取消, 5:已完成,6:申述中,7:穿搭方案制作中) -->
		<!-- orderType 订单类型(0:线下搭配订单, 1:线上穿搭服务订单, 2:穿搭方案订单) -->
		<view v-else>
			<orderPopue ref="orderPopue" :orderData="popueData"></orderPopue>
			<u-top-tips ref="uTips"></u-top-tips>

			<view class="countTimeBox flex_col" v-if="orderData.orderStatus === 3">
				<view class="countTimeBox_tip">等待买家付款</view>
				<view class="flex_row">
					<view>剩余时间：</view>
					<uni-countdown :show-day="false" :hour="time.hour" :minute="time.minute" :second="time.second" :reset="false"
					 @timeup="timeUp"></uni-countdown>
				</view>
			</view>
			<!-- 搭配师/用户信息 -->
			<view class="topBox" v-if="role === 'user'">
				<view class="title">搭配师信息</view>
				<view class="content">
					<view class="left">
						<view class="icon" @click="navToStylistPage">
							<image :src="orderData.stylist.headphoto" mode="aspectFill"></image>
						</view>
						<view class="left_info">
							<view class="info">
								<view class="info_text">姓名：{{ orderData.stylist.nickname }}</view>
								<view class="info_text">性别：{{ orderData.stylist.gander | toSex }}</view>
								<view class="info_text">
									<span style="margin-right: 6upx;">搭配评分：{{ orderData.stylist.comprehensiveScore === null ? 0 : orderData.stylist.comprehensiveScore.toFixed(1) }}</span>
									<u-rate disabled :count="5" :current="orderData.stylist.comprehensiveScore === null ? 0 : orderData.stylist.comprehensiveScore.toFixed(1)"
									 active-color="#FFCC0B" size="29" gutter="5" />
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="info">
							<view class="info_text" style="display: flex;align-items: center;" @click="phone" v-if="orderData.orderType === 1">
								<!-- 线下订单才可拨打电话 -->
								<image style="width: 28upx;height: 28upx;" src="../../../static/img/order/phone.png"></image><span style="padding-left: 6upx;">联系ta</span>
							</view>
							<!-- 待付款，已完成，已取消不能聊天 -->
							<view class="info_text" style="display: flex;align-items: center;margin-top: 10upx;" @click="chat" v-if="orderData.orderStatus !== 4 && orderData.orderStatus !== 5">
								<image style="width: 30upx;height: 26upx;" src="../../../static/img/order/chat.png"></image><span style="padding-left: 6upx;">聊天</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="topBox" v-if="role === 'stylist'">
				<view class="title">客户信息</view>
				<view class="content">
					<view class="left">
						<view class="icon">
							<image :src="orderData.user.headphoto" mode="aspectFill"></image>
						</view>
						<view class="left_info">
							<view class="info">
								<view class="info_text">昵称：{{ orderData.user.nickname }}</view>
								<view class="info_text">地址：{{ orderData.user.city }}</view>
								<view class="info_text">性别：{{ orderData.user.gander | toSex }}</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="info">
							<view class="info_text" style="display: flex;align-items: center;" @click="phone" v-if="orderData.orderType === 1">
								<image style="width: 28upx;height: 28upx;" src="../../../static/img/order/phone.png"></image><span style="padding-left: 6upx;">联系ta</span>
							</view>
							<view class="info_text" style="display: flex;align-items: center;margin-top: 10upx;" @click="chat" v-if="orderData.orderStatus !== 4 && orderData.orderStatus !== 5">
								<image style="width: 30upx;height: 26upx;" src="../../../static/img/order/chat.png"></image><span style="padding-left: 6upx;">聊天</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="bottomBox">
				<view class="title">订单信息</view>
				<view class="content" v-if="orderData.orderType === 2">
					<!-- 线上订单 -->
					<view class="info_text">搭配单号：{{ orderData.orderNo }}</view>
					<view class="info_text">下单时间：{{ formatDate(orderData.orderTime) }}</view>
					<view class="info_text">搭配等级：{{ orderData.stylistLevelName }}</view>
					<view class="info_text">订单总价：￥{{ orderData.orderMoney }}</view>
					<view class="info_text">当前状态：{{ orderData.orderStatus | orderStatus }}</view>
				</view>
				<view class="content" v-if="orderData.orderType === 0">
					<!-- 线下订单 -->
					<view class="info_text">搭配单号：{{ orderData.orderNo }}</view>
					<view class="info_text">下单时间：{{ formatDate(orderData.orderTime) }}</view>
					<view class="info_text" v-if="!isBlank(orderData.signTime)">陪购师签到时间：{{ formatDate(orderData.signTime) }}</view>
					<view class="info_text" v-if="!isBlank(orderData.finishTime)">陪购就结束时间：{{ formatDate(orderData.finishTime) }}</view>
					<view class="info_text">购买时长：{{ orderData.timeLength }}小时</view>
					<view class="info_text">订单总价：￥{{ orderData.orderMoney }}</view>
					<view class="info_text">搭配等级：{{ orderData.stylistLevelName }}</view>
					<view class="info_text">实付款：￥{{ orderData.payMoney }}</view>
					<view class="info_text">目的地：{{ orderData.placeName }} <text v-if="!isBlank(orderData.meetAddress)">(见面地点:{{ orderData.meetAddress }})</text></view>
					<view class="info_text">当前状态：{{ orderData.orderStatus | orderStatus }}</view>
				</view>
				<view class="bottom" v-if="orderData.orderStatus === 6 || orderData.orderStatus === 7">
					<view class="tuikuai" hover-class="opacity7">
						退款详情请参考 <span style="color: #FFD98B;">《退款协议》</span>
					</view>
					<view class="money">实付款：¥ {{ orderData.payMoney }}</view>
				</view>
			</view>


			<!-- 按钮区域 1:待签到(线下), 2: 待结束(线下), 3:待付款, 4:已取消, 5:已完成,6:申述中,7:穿搭方案制作中 -->
			<view class="blck">
				<block v-if="orderData.orderStatus === 3">
					<view class="tuikuanBtn" hover-class="opacity7" @click="cancelOrder()">取消订单</view>
				</block>
				<block v-if="orderData.orderStatus === 4"></block>
				<block v-if="orderData.orderStatus === 5">
					<view class="tuikuanBtn" hover-class="opacity7" v-if="role === 'stylist'" @click="jumpUserInfo('stylist_watch')">查看资料</view>
				</block>
				<block v-if="orderData.orderStatus === 6"></block>
				<block v-if="orderData.orderStatus === 7">
					<view class="tuikuanBtn" hover-class="opacity7" v-if="role === 'user'" @click="cancelOrder('refund')">申请退款</view>
					<view class="tuikuanBtn" hover-class="opacity7" v-if="role === 'stylist'" @click="cancelOrder()">取消订单</view>
					<view class="tuikuanBtn" hover-class="opacity7" v-if="role === 'stylist'" @click="jumpUserInfo('stylist')">查看资料</view>
				</block>
			</view>

			<view class="footer">
				<block v-if="orderData.orderStatus === 1">
					<view v-if="role === 'stylist'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 搭配师操作 -->
						<view class="mocup_btn btn" @click.stop="signOrder()">签到</view>
					</view>
				</block>
				<block v-if="orderData.orderStatus === 2">
					<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 搭配师、用户操作 -->
						<view class="mocup_btn btn" @click.stop="finishOrder()">结束订单</view>
					</view>
				</block>

				<block v-if="orderData.orderStatus === 3">
					<view v-if="role === 'user'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 用户操作 -->
						<view class="mocup_btn btn" @click.stop="toPayment()">付款</view>
					</view>
				</block>
				<block v-if="orderData.orderStatus === 4">
					<!-- 无需操作 -->
				</block>
				<block v-if="orderData.orderStatus === 5">
					<view v-if="role === 'user'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 用户操作 -->
						<view class="mocup_btn btn-2-w" @click.stop="watchWearPlan()">查看方案</view>
						<view class="mocup_btn btn-2" @click.stop="evaluateOrder()">评价</view>
					</view>
					<!-- 搭配师无操作 -->
					<view v-if="role === 'stylist'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 搭配师操作 -->
						<view class="mocup_btn btn" style="background: #D4D4D4 !important;">订单完成</view>
					</view>
				</block>
				<block v-if="orderData.orderStatus === 6">
					<!-- 无需操作 -->
				</block>
				<block v-if="orderData.orderStatus === 7">
					<view v-if="role === 'user'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 用户操作 -->
						<view class="mocup_btn btn" @click.stop="jumpUserInfo('user')">设置资料</view>
					</view>
					<view v-if="role === 'stylist'" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;">
						<!-- 搭配师操作 -->
						<view class="mocup_btn btn" @click.stop="createWearPlan()">创建方案</view>
					</view>
				</block>
			</view>

		</view>
		
		<!-- 方案预览 -->
		<previewImage ref="previewImage" :opacity="0.8" :wearData="shareData" :imgs="imgs" :descs="descs" @changeData="changeData" @longPress="longPress"></previewImage>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		isBlank
	} from '@/utils/common.js'
	import orderPopue from './order_popue.vue'
	import uniCountdown from "@/components/linnian-CountDown/uni-countdown.vue"
	import { mixin } from "@/mixins/wearPlan.js"
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	
	export default {
		computed: {
			...mapState(['userInfo']),
			formatDate() {
				return function(val) { // 对计算属性进行传参
					return val ? this.$u.timeFormat(val, 'yyyy-mm-dd hh:MM:ss') : ''
				}
			}
		},
		mixins:[mixin], //混入文件
		data() {
			return {
				loading: false,
				orderParam: {
					needAllUser: 1
				},
				orderData: {},
				popueData: {},
				role: "", // 进入页面者角色
				time: {
					hour: 0,
					minute: 0,
					second: 0
				}
			};
		},
		components: {
			orderPopue,
			uniCountdown,
			previewImage
		},
		onLoad(options) {
			if (options.id) {
				this.orderParam.orderId = options.id
			} else if (options.orderNo) {
				this.orderParam.orderNo = options.orderNo
			}
			// this.getOrderDetail()
		},
		async onShow() {
			//页面显示时，加载订单信息
			await this.getOrderDetail()
			// 待付款时显示剩余时间
			// console.log(this.orderData)
			// if (this.orderData.orderStatus === 3) {
			// 	this.showPayTime()
			// }
		},
		beforeDestroy() {
			//console.log("页面销毁")
		},
		// 过滤器
		filters: {
			toSex(val) {
				if (val === 0) {
					return "男";
				} else {
					return "女";
				}
			},
			payType(val) {
				// 0：微信小程序微信支付,1:APP微信支付, 2:支付宝支付, 3:支付宝小程序支付宝支付, 4:其他, 5:微信网页支付, 6:苹果支付
				switch (val) {
					case 0:
						return "微信小程序微信支付";
						break;
					case 1:
						return "APP微信支付";
						break;
					case 2:
						return "支付宝支付";
						break;
					case 3:
						return "支付宝小程序支付宝支付";
						break;
					case 4:
						return "其他";
						break;
					case 5:
						return "微信网页支付";
						break;
					case 6:
						return "苹果支付";
						break;
				}
			},
			orderStatus(val) {
				// 订单状态(0:待接单, 1:待签到, 2: 待结束, 3:待付款, 4:已取消, 5:已完成,6:申述中,7:穿搭方案制作中)
				switch (val) {
					case 0:
						return "待接单";
						break;
					case 1:
						return "待签到";
						break;
					case 2:
						return "待结束";
						break;
					case 3:
						return "待付款";
						break;
					case 4:
						return "已取消";
						break;
					case 5:
						return "已完成";
						break;
					case 6:
						return "申述中";
						break;
					case 7:
						return "穿搭方案制作中";
						break;
				}
			}
		},
		methods: {
			isBlank,
			// 获取订单详情
			getOrderDetail() {
				this.loading = true
				this.$u.api.findOrderByNo(this.orderParam).then(res => {
					this.loading = false
					if (res.code === 200) {
						let time = res.timestamp
						this.orderData = res.data
						// 判断角色
						if (this.orderData.user.id === this.userInfo.id) {
							this.role = "user"
						} else if (this.orderData.stylist.id === this.userInfo.id) {
							this.role = "stylist"
						}

						// 待付款显示剩余时间
						if (this.orderData.orderStatus === 3) {
							this.showPayTime(time)
						}
					}
				})
			},
			// 显示剩余支付时间
			showPayTime(time) {
				if(this.orderData.receiveTime === null) {
					// 用户在主页下的单
					if (this.orderData.orderTime + 30 * 60 > time) {
						var nTime = 30 * 60 - (time - this.orderData.orderTime)
						this.time.hour = Math.floor(nTime / 3600);
						this.time.minute = Math.floor(nTime / 60 % 60);
						this.time.second = Math.floor(nTime % 60);
					}
				}else {
					// 地图下单
					if (this.orderData.receiveTime + 30 * 60 > time) {
						var nTime = 30 * 60 - (time - this.orderData.receiveTime)
						this.time.hour = Math.floor(nTime / 3600);
						this.time.minute = Math.floor(nTime / 60 % 60);
						this.time.second = Math.floor(nTime % 60);
					}
				}
			},
			// 支付时间结束订单自动取消
			timeUp() {
				this.orderData.orderStatus = 4
			},
			// 电话联系
			phone() {
				if (this.role === 'user') {
					uni.makePhoneCall({
						phoneNumber: this.orderData.stylist.phone
					});
				} else {
					uni.makePhoneCall({
						phoneNumber: this.orderData.user.phone
					});
				}
			},
			// 聊天
			chat() {
				if (this.orderData.orderStatus === 3) {
					uni.showToast({
						title: "需付款才能聊天",
						icon: "none"
					})
					return false
				}

				if (this.role === 'user') {
					// 我是用户
					uni.navigateTo({
						url: '/pagesB/pages/chat/chat?name=' + this.orderData.stylist.nickname + '&imUser=' + this.orderData.stylist.imUser +
							"&face=" + this.orderData.stylist.headphoto
					})
				} else {
					// 我是搭配师
					uni.navigateTo({
						url: '/pagesB/pages/chat/chat?name=' + this.orderData.user.nickname + '&imUser=' + this.orderData.user.imUser +
							"&face=" + this.orderData.user.headphoto
					})
				}
			},
			// 按钮事件
			// 搭配师签到订单
			signOrder() {
				var _this = this
				uni.showModal({
					title: "提示",
					content: "请确认是否在指定地点和约定搭配时间，签到后开始将计算陪购时长。",
					success: (res) => {
						if (res.confirm) {
							uni.getSystemInfo({ // 获取系统信息
								success(res) {
									let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
									let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
									if (locationEnabled == false || locationAuthorized == false) {
										// GPS 未授权
										uni.showToast({
											title: "未授权定位, 请返回地图首页授权获取位置功能以提供相应的服务",
											icon: "none"
										})
										return false
									} else {
										// GPS 已授权 判断微信定位是否授权
										uni.authorize({
											scope: 'scope.userLocation',
											success() {
												// GPS已授权 微信定位已授权
												uni.getLocation({
													type: 'gcj02',
													success({latitude,longitude}) {
														var data = {
															orderNo: _this.orderData.orderNo,
															latitude: latitude,
															longitude: longitude
														}
														_this.$u.api.stylistSign(data).then(res => {
															if (res.code === 200) {
																uni.showToast({
																	title: "签到订单成功",
																	icon: "none"
																})
																_this.getOrderDetail()
															}
														})
													}
												});
											},
											fail() {
												// GPS已授权 微信定位未授权
												uni.showModal({
													title: '未打开小程序定位',
													content: '找不到您的位置，请开启定位',
													confirmText: '开启定位',
													showCancel: false,
													success: (res) => {
														if (res.confirm) {
															uni.openSetting(); // 打开地图权限设置
														}
													}
												});
											}
										});
									}
								}
							})
						}
					}
				});
			},
			// 搭配师提前结束订单
			finishOrder() {
				var _this = this
				uni.showModal({
					title: "提示",
					content: "搭配开始前一小时内提前结束按一小时计费,超出一小时不支持提前结束,您确定要提前结束订单吗? ",
					success: (res) => {
						if (res.confirm) {
							var data = {
								orderNo: _this.orderData.orderNo
							}
							_this.$u.api.finishOrder(data).then(res => {
								if (res.code === 200) {
									_this.getOrderDetail()
								}
							})
						}
					}
				});
			},
			// 取消订单/申请退款
			cancelOrder(refund) {
				let title = "取消订单"
				let content = "确定取消此订单？"
				if (refund) {
					title = "申请退款"
					content = "确定要申请退款吗"
				} else {
					if (this.role === 'user') {
						// 我是用户
						content = '确定取消此订单？一天内最多取消三次订单即不可在地图下单'
					}
					if (this.role === 'stylist') {
						// 我是搭配师
						content = '确定取消此订单？取消订单过多将会影响发单数'
					}
				}

				uni.showModal({
					title: title,
					content: content,
					success: (res) => {
						if (res.confirm) {
							this.doCancelOrder();
						}
					}
				});
			},
			doCancelOrder() {
				var data = {
					orderNo: this.orderData.orderNo
				}
				this.$u.api.cancelOrder(data).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: "取消订单成功",
							icon: "none"
						})
						this.orderData.orderStatus = res.data.orderStatus
					}
				})
			},
			// 查看方案
			watchWearPlan() {
				let data = {
					orderId: this.orderData.id
				}
				this.$u.api.findSchemeByOrderId(data).then(res => {
					if (res.code === 200) {
						this.imgs = []
						this.descs = []
						this.shareData = res.data
						this.shareData.content = JSON.parse(res.data.content)

						for (let i in this.shareData.content) {
							this.imgs.push("https://posting.imguangguang.com/" + this.shareData.content[i][0].photo)
							this.descs.push(this.shareData.content[i][0].introduce)
						}
						this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
					}
				})
			},
			// 评价订单
			evaluateOrder() {
				if(this.orderData.evaluated) {
					uni.showToast({
						title: "您已评价过该订单了",
						icon: "none"
					})
					return false
				}
				
				this.popueData = this.orderData
				this.$refs.orderPopue.show()
			},
			// 付款订单
			toPayment() {
				var that = this

				uni.showLoading({
					title: '正在获取支付参数'
				})
				var data = {
					orderNo: that.orderData.orderNo,
					payType: 0 // 0：微信小程序微信支付,1:APP微信支付, 2:支付宝支付, 3:支付宝小程序支付宝支付, 4:其他, 5:微信网页支付, 6:苹果支付
				}

				that.$u.api.getPayParams(data).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								that.$refs.uTips.show({
									title: '支付成功, 正在邀请搭配师为您制作穿搭方案，可完善资料以供搭配师参考',
									type: 'success',
									duration: '6000'
								})
								that.orderData.orderStatus = 7 // 穿搭方案制作中
								// 跳转至聊天
								uni.navigateTo({
									url: '/pagesB/pages/chat/chat?name=' + that.orderData.stylist.nickname + '&imUser=' + that.orderData.stylist
										.imUser + "&face=" + that.orderData.stylist.headphoto
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
			},
			// 跳转设置资料
			jumpUserInfo(type) {
				if (type === 'stylist') {
					uni.navigateTo({
						url: "/pagesB/pages/my/userInfo?userId=" + this.orderData.user.id + "&orderId=" + this.orderData.id
					})
				} else if (type === 'user') {
					uni.navigateTo({
						url: "/pagesB/pages/my/userInfoPage?from=order"
					})
				} else if (type === 'stylist_watch') {
					// 只看 不能更改
					uni.navigateTo({
						url: "/pagesB/pages/my/userInfo?userId=" + this.orderData.user.id
					})
				}
			},
			// 搭配师跳转创建方案
			createWearPlan() {
				var data = {
					orderId: this.orderData.id
				}
				this.$u.api.startMakeScheme(data).then(res => {
					if (res.code === 200) {
						// 调用接口
						uni.navigateTo({
							url: "/pagesB/pages/wearPlan/createPlan?orderId=" + this.orderData.id + "&buyerUserId=" + this.orderData.placeAnOrderUserId
						})
					}
				})
			},
			// 进入搭配师主页
			navToStylistPage() {
				uni.navigateTo({
					url: '/pagesB/pages/my/indexStylist?id=' + this.orderData.stylist.id
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/loading.scss";

	page {
		background: #F7F8FA;
		height: 100%;
	}

	.countTimeBox {
		padding: 12upx 0;
		background: #B1BEFD;
		color: white !important;
		font-size: 22upx;

		&_tip {
			font-size: 32upx;
			font-weight: bold;
		}
	}


	.topBox {
		padding: 30upx 20upx 30upx 26upx;
		margin: 30upx auto 50upx auto;
		display: flex;
		flex-direction: column;
		background: white;

		.title {
			font-weight: bold;
			font-size: 32upx;
			color: #111111;
		}

		.content {
			margin-top: 30upx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;

				.icon {
					width: 132upx;
					height: 132upx;
					display: flex;

					image {
						width: 132upx;
						height: 132upx;
						border-radius: 8upx;
						background: #D8D8D8;
					}
				}

				.left_info {
					padding-left: 12upx;

					.info_text {
						color: #666666;
						font-size: 26upx;
						padding-bottom: 11upx;
					}
				}
			}

			.right {
				display: flex;
				justify-content: flex-start;

				.info_text {
					color: #333333;
					font-weight: bold;
					font-size: 28upx;
					padding-bottom: 15upx;
				}

				.tag {
					background: #EAEAEA;
					color: white;
					padding: 4upx 17upx;
					border-radius: 4px;
					font-size: 30upx;
				}
			}
		}
	}

	.bottomBox {
		padding: 30upx 46upx 30upx 50upx;
		display: flex;
		flex-direction: column;
		background: white;

		.title {
			font-weight: bold;
			font-size: 32upx;
			color: #111111;
		}

		.content {
			display: flex;
			flex-direction: column;
			margin: 20upx 0 40upx 0;

			.info_text {
				font-size: 22upx;
				color: #999999;
				padding-bottom: 12upx;
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.tuikuai {
				font-size: 20upx;
				color: #999999;
				padding-bottom: 16upx;
			}

			.money {
				font-size: 30upx;
				font-weight: bold;
				color: #666666;
			}
		}
	}

	.blck {
		margin-top: 16upx;
		padding-right: 30upx;
		float: right;
		display: flex;
		align-items: center;

		.tuikuanBtn {
			border-radius: 29px;
			border: 1upx solid #999999;
			font-size: 26upx;
			color: #999999;
			padding: 10upx 22upx !important;
			margin-left: 40upx;
		}
	}

	.footer {
		padding: 0 30upx;
		width: 100%;
		background-color: #fbfbfb;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 32upx;
		position: fixed;
		bottom: 36upx;
		z-index: 5;
		text-align: center;

		.btn {
			width: 100%;
			height: 90upx;
			line-height: 90upx;
		}

		.btn-2 {
			width: 335upx;
			height: 90upx;
			line-height: 90upx;
		}

		.btn-2-w {
			width: 335upx;
			height: 90upx;
			line-height: 90upx;
			background: white !important;
			color: #979797;
			border: 1px solid #979797;
		}
	}
</style>
